<template>
  <div class="about">
    <h1>This is an about page</h1>
    <video
      src="/test.mp4"
      id="video"
      height="300px"
      width="300px"
      controls
    ></video>
    <hr />
    <el-button type="primary" size="default" id="togglePipButton"
      >按钮</el-button
    >

    <div class="box" id="box" src="">
      <video
        src="/test.mp4"
        height="200px"
        width="200px"
        muted
        controls
      ></video>
    </div>
  </div>
</template>
<script>
export default {
  name: 'about',
  data() {
    return {}
  },
  mounted() {
    const video = document.getElementById('video')
    const box = document.getElementById('box')
    const togglePipButton = document.getElementById('togglePipButton')

    // Hide button if Picture-in-Picture is not supported or disabled.
    togglePipButton.hidden =
      !document.pictureInPictureEnabled || video.disablePictureInPicture

    togglePipButton.addEventListener('click', async () => {
      // alert(111)
      // If there is no element in Picture-in-Picture yet, let’s request
      // Picture-in-Picture for the video, otherwise leave it.

      try {
        if (document.pictureInPictureEnabled) {
          console.log(1111111111)
          const res = await video.requestPictureInPicture()
          console.log('res===', res)
        } else {
          console.log(222222222)
          await document.exitPictureInPicture()
        }
      } catch (err) {
        // Video failed to enter/leave Picture-in-Picture mode.
      }
    })
    video.addEventListener('enterpictureinpicture', event => {
      // Video entered Picture-in-Picture mode.
      const pipWindow = event.pictureInPictureWindow
      console.log(
        <code
          data-opaque
          bs-autolink-syntax="`Picture-in-Picture window width: ${pipWindow.width}`"
        >
          Picture-in-Picture window width: ${pipWindow.width}
        </code>
      )
      console.log(
        <code
          data-opaque
          bs-autolink-syntax="`Picture-in-Picture window height: ${pipWindow.height}`"
        >
          Picture-in-Picture window height: ${pipWindow.height}
        </code>
      )
    })

    video.addEventListener('leavepictureinpicture', () => {
      // Video left Picture-in-Picture mode.
    })
    function onPipWindowResize(event) {
      // Picture-in-Picture window has been resized.
      const { width, height } = event.target
      updateVideoSize(width, height)
    }

    function updateVideoSize(width, height) {
      // TODO: Update video size based on pip window width and height.
    }
  }
}
</script>
<style lang="less" scoped>
.box {
  background-color: aqua;
  height: 200px;
  width: 200px;
}
</style>
